<template>
  <div class="app-container"  style="border: 0px #e5e6eb solid">
    <div class="app-title">
      <span>维护全部工资导入</span>
    </div>
    <!-- 按钮 -->
    <div class="filter-container">
      <div>
        <el-col style="text-align:center;margin-top: -8px;">
           <!-- <el-button
              size="small"
              class="filter-item"
              style="margin-left: 10px;margin-top: 6px; "
              type="primary"
              @click="outPutFile"
            >
              模板导出
            </el-button> -->
            <el-button
              size="small"
              class="filter-item"
              style="margin-left: 10px;margin-top: 20px; "
              type="primary"
             
              @click="importFile"
            >
              导入
            </el-button>
        </el-col>
        <el-col>
        <P style="font-size:35px; color:Gold ;text-align:center;margin-top: 250px ">本功能可以导入区划全部人员工资<br>切记不要修改身份证号否则会弹出身份证号有误！！！<br>切记不要修改单位编码否则会提示单位编码有误！！！<br>切记不要导入已上报单位否则会弹出已上报不可导入！！！ </P>
    </el-col>
      </div>
    </div>
      <el-dialog
      v-dialogDrag
      :close-on-click-modal="false"
      title="导入"
      :visible.sync="dialogImportFormVisible"
      width="29%"
    >
      <el-upload
        class="upload-demo"
        drag
        style="padding-left: 2px"
        action="#"
        list-type="multipart/form-data"
        accept=".xls,.xlsx"
        :show-file-list="false"
        :http-request="uploadExcel"
      >
        <i class="el-icon-upload" />
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div slot="tip" class="el-upload__tip" />
      </el-upload>
    </el-dialog>
  </div>
</template>s
<script>
import {
outPutSalaryReportList,payeeImport
} from "@/api/unitSalaryReport/unitSalaryReportAllImportFile";
import Pagination from '@/components/Pagination' 
import tableEmpty from '@/components/table/empty'
export default {
  name: 'Unit',
  components: { Pagination, tableEmpty },
  filters: {
  },
  data() {
    return {
      tableHeight: null,
      that: this,
      list: null,
      total: 0,
      listLoading: true,
      saveLoading: false,
      deleteLoading: false,
      dialogImportFormVisible: false,
      isEdit: false,
      listQuery: {
        page: 1,
        limit: 200
      },
      dialogFormVisible: false,
      dialogStatus: '',
     
      dialogQueryVisible: false
    }
  },
  watch: {
    // 表格的数据数组
    list(val) {
      this.doLayout()
    }
  },
  created() {
  },
  mounted() {
    this.getTbHeight()
  },
  beforeMount() {
    window.addEventListener('resize', this.getTbHeight)
  },
  methods: {
    /* 重新渲染table组件 */
    doLayout() {
      this.$nextTick(() => {
        this.$refs.singalTable.doLayout()
      })
    },
    // 获取table高度的方法
    getTbHeight() {
      this.tableHeight = window.innerHeight - 198
    },
      // 导出
    outPutFile() {
      outPutSalaryReportList().then((response) => {
        const link = document.createElement("a");
        const objectUrl = URL.createObjectURL(response);
        link.href = objectUrl;
        link.download = "全部工资.xls";
        link.click();
        URL.revokeObjectURL(objectUrl);
      });
    },
     // 上传文件
    uploadExcel(item) {
      const fileObj = item.file;
      const salaryMonth = this.selectMonth;
      // FormData 对象
      const form = new FormData();
      // 文件对象
      form.append("file", fileObj);
      form.append("salaryMonth",salaryMonth);
      payeeImport(form)
        .then((response) => {
          this.$message({
            showClose: true,
            message: "导入成功",
            type: "success",
            duration: 4000,
          });
          this.dialogImportFormVisible = false;
        })
        .then(() => {
        });
    },
    // 导入
    importFile() {
      this.dialogImportFormVisible = true;
    }
  }
}
</script>
<style lang="scss" scoped>
.formDeviation {
  margin-left: 10%;
  .el-form-item__error {
    padding-top: 5%;
  }
}
.redstar.el-form-item__error{
  margin-top: 35px !important;
  left: -96px !important;
}
</style>
